<template>
  <div class="standard item">
    <div class="title after">
      {{$route.meta.title}} (年份请不要相同)
      <div class="search f-r">
        <el-input
          v-model="search.value"
          size="small"
          placeholder="搜索"
          @keyup.enter.native="searchHandle();page.current=1"
          class="input"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          @click="searchHandle();page.current=1"
          class="button"
        >搜索</el-button>
        <el-button
          size="small"
          type="primary"
          @click="form.show =true;form.edit=false"
          class="button"
        >添 加</el-button>
      </div>
    </div>
    <div class="list">
      <el-table ref="selects" :data="list" @selection-change="change" v-loading="loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="年份" prop="year"></el-table-column>
        <el-table-column label="期数" prop="period"></el-table-column>
        <el-table-column label="细则">
          <template slot-scope="scope">
            <list :item="scope.row"></list>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="addtime"></el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="form.list = {...scope.row};form.show=true;form.edit=true"
            >编辑</el-button>
            <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <div class="action after">
        <div class="left">
          <el-button @click="checkAll" size="small">全选</el-button>
          <el-button @click="del(checkList)" size="small" type="danger">删除选中项</el-button>
          <el-button
            size="small"
            type="primary"
            @click="copyStandard(checkList);"
            class="button"
          >复制标准</el-button>
        </div>
        <div class="right">
          <el-pagination
            layout="total,prev, pager, next"
            :total="page.count"
            :page-size="page.size"
            @current-change="pageChange"
            :current-page="page.current"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加修改用户 -->
    <el-dialog title="操作" width="600px" :visible.sync="form.show" @closed="down">
      <el-form :model="form.list" :rules="form.rules" ref="form.list" size="small">
        <el-form-item label="年份 : " label-width="100px" prop="year">
          <el-input v-model="form.list.year" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="期数 : " label-width="100px" prop="period">
          <el-input-number v-model="form.list.period" :min="1" :max="10"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submit()" size="small" :disabled="form.state">提 交</el-button>
        <el-button @click="form.show=false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import list from "./list.vue";
export default {
  components: {
    list
  },
  data() {
    return {
      list: [],
      form: {
        show: false,
        list: {
          year: "",
          period: ""
        },
        // 表单验证
        rules: {
          year: [{ required: true, message: "请输入年份", trigger: "blur" }],
          period: [{ required: true, message: "请输入期数", trigger: "blur" }]
        },
        // 表单提交状态
        state: false
      },
      // 页码(默认条数,页数,总数量)
      page: {
        size: 10,
        current: 1,
        count: 0
      },
      // 空列表 存储已经选中的选项
      checkList: [],
      // 搜索
      search: {
        value: ""
      },
      // 加载
      loading: false
    };
  },
  methods: {
    // 复制标准
    copyStandard(list) {
      // 当没有选择时
      if (!list.length) {
        this.common.message({ message: "请选择标准", type: "error" });
        return false;
      }
      // 复制提示
      this.common.confirm({ message: "确认复制嘛?" }).then(() => {
        var data = {
          id: []
        };
        for (var i in list) {
          data.id.push(list[i].id);
        }
        this.axios.post("/admin/Index/copy_standard", data).then(ref => {
          var ref = ref.data;
          if (ref.state) {
            this.common.message({ message: ref.info });
            this.searchHandle();
          } else {
            this.common.message({ message: ref.info, type: "error" });
          }
        });
      });
    },
    // 增加修改
    submit() {
      this.$refs["form.list"].validate(valid => {
        if (valid) {
          var form = this.form;
          form.state = true;
          var data = { ...form.list };
          data["T"] = "year_period";
          this.axios.post("/admin/Index/handle", data).then(ref => {
            var ref = ref.data;
            if (ref.state) {
              this.common.message({ message: ref.info });
              // 关闭弹窗
              form.show = false;
              // 重新搜索
              this.searchHandle();
            } else {
              this.common.message({ message: ref.info, type: "error" });
            }
            // 关闭提交锁定
            form.state = false;
          });
        }
      });
    },
    // 删除
    del(row) {
      // 选中项为空时
      if (row.length == 0) {
        this.common.message({
          message: "删除失败,请选择删除项",
          type: "warning"
        });
        return false;
      }
      this.common.confirm().then(() => {
        var data = { T: "year_period", id: [] };
        row = row.length ? row : [row];
        for (var i in row) {
          data.id.push(row[i]["id"]);
        }
        var url = "/admin/Index/del";
        // 请求发送
        this.axios.post(url, data).then(ref => {
          var ref = ref.data;
          if (ref.state) {
            // 计算总页数
            var n = Math.ceil((this.page.count - row.length) / this.page.size);
            // 更新页码
            if (n && n < this.page.current) this.page.current--;
            // 重新搜索
            this.searchHandle();
            this.common.message({ message: ref.info });
          } else {
            this.common.message({ message: ref.info, type: "error" });
          }
        });
      });
    },
    // 清空
    down() {
      this.form.list = {
        year: "",
        period: ""
      };
      this.$refs["form.list"].resetFields();
    },
    // 搜索
    searchHandle() {
      // 开启加载
      this.loading = true;
      var data = {
        info: this.search.value,
        // 页码
        page: {
          current: this.page.current,
          size: this.page.size
        }
      };
      this.axios.post("/admin/Index/search_year_period", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.list = ref.other.data;
          this.page.count = ref.other.count;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
        // 开启加载
        this.loading = false;
      });
    },
    // 当选择框出现改变时
    change(selection) {
      this.checkList = selection;
    },
    // 选中全部
    checkAll() {
      this.list.forEach(row => {
        this.$refs.selects.toggleAllSelection(row);
      });
    },
    // 页码改变
    pageChange(val) {
      this.page.current = val;
      this.searchHandle();
    }
  },
  created() {
    this.searchHandle();
  }
};
</script>
<style scoped>
.search {
  float: right;
}
.search .input {
  width: 200px;
  margin-right: 10px;
}
</style>